<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css" th:href="@{/static/layui/css/layui.css}">
    <title>医院疫情打卡状况</title>
    <script src="https://unpkg.com/vue@next"></script>
    <!--    ////////////////////////////////////////////-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css"  media="all" th:href="@{/static/layui/css/layui.css}">
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=a19468fd7cfb29366a79b00b7ba964a1"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        .first {
            width: 49.5%;
            float:left;
            height: max-content;

            /*background: #E9E7E7;*/

            /*height: 100px;*/
            /*border: 1px solid #3B6273;*/
        }
        .center {
            width: 1%;
            float:left;
            height: max-content;
            /*background: #E9E7E7;*/
            /*height: 100px;*/
            /*border: 1px solid #3B6273;*/
        }
        .second {
            width: 49.5%;
            float:left;
            height: max-content;
            /*border: 1px solid #3B6273;*/
        }
    </style>
</head>
<body style="background-color:#a6e1ec">
<blockquote class="layui-elem-quote layui-text">
    <a href="/judge"  >今日打卡</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/historyRecord">历史记录</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/personal">修改密码</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/logout">退出</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" style="color: red">今日打卡现状&留言反馈</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/global">国内疫情现状-视图总览</a>
</blockquote>
<div id="app">
    <main>
        <div class="first" style="background: #FFF8DC; box-shadow: 2px 2px 5px #bbb; width: 38%">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>今日打卡</legend>
            </fieldset>
        <form class="layui-form" th:action="@{/submit}" th:each="card:${cards}">

            <div class="layui-form-item" th:text="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+${msg}" th:if="${not #strings.isEmpty(msg)}"></div>

            <div class="layui-form-item">
                <label class="layui-form-label">工号：</label>
                <div class="layui-input-block">
                    <input type="text"
                           th:value="${card.getWorkerId()}"
                           name="workerId"
                           required
                           lay-verify="workerId"
                           placeholder="请输入工号"
                           autocomplete="off"
                           class="layui-input"
                           style="width: 500px">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名：</label>
                <div class="layui-input-block">
                    <input style="width: 500px" type="text" th:value="${card.getName()}" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">身体情况：</label>
                <div class="layui-input-block" style="width: 500px">
                    <select th:value="${card.getBodyState()}" name="bodyState" lay-verify="required">
                        <option value=""></option>
                        <option th:selected="${card.getBodyState()=='0'}" value="0">健康</option>
                        <option th:selected="${card.getBodyState()=='1'}" value="1">有发烧、咳嗽、咽痛、腹泻、乏力、鼻塞、流涕等症状</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">健康码状态：</label>
                <div class="layui-input-block" style="width: 500px">
                    <select th:value="${card.getHeathCodeState()}"  name="heathCodeState" lay-verify="required">
                        <option value=""></option>
                        <option th:selected="${card.getBodyState()=='0'}" value="0">绿色</option>
                        <option th:selected="${card.getBodyState()=='1'}" value="1">黄色</option>
                        <option th:selected="${card.getBodyState()=='2'}" value="2">红色</option>
                        <option th:selected="${card.getBodyState()=='3'}" value="3">其它</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">近14天内是否去过中高风险地区：</label>
                <div class="layui-input-block">
                    <input type="radio" th:checked="${card.getInDangerousPlace()=='1'}" name="inDangerousPlace" value="1" title="是">
                    <input type="radio" th:checked="${card.getInDangerousPlace()=='0'}" name="inDangerousPlace" value="0" title="否" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">当前体温(℃)：</label>
                <div class="layui-input-block">
                    <input style="width: 500px" type="text" th:value="${card.getTemperatureToday()}" name="temperatureToday" required  lay-verify="temperatureToday" placeholder="输入格式：00.0" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">居住地址：</label>
                <div class="layui-input-block">
                    <input id="get_location"  style=" width: 500px; background: #E9E7E7" type="text" name="addressOfHome" required  lay-verify="required" placeholder="格式：省-市-镇/区-(详细地址)" autocomplete="off" class="layui-input">
                    <button style="background: #E9E7E7" value="获取定位" @click="addMsg">获取定位</button>
                </div>
            </div>
            <script>
                var btn
            </script>

            <div class="layui-form-item">
                <label class="layui-form-label">联系方式：</label>
                <div class="layui-input-block">
                    <input style="width: 500px" type="text" th:value="${card.getPhoneNumber()}" name="phoneNumber" required  lay-verify="phoneNumber" placeholder="11位数字" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">补充：</label>
                <div class="layui-input-block">
                    <textarea style="width: 500px" name="extend" th:value="${card.getExtend()}" placeholder="请输入内容(选填)" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置到进入时状态</button>
                </div>
            </div>
        </form>
        </div>
    </main>
    <div class="bgc" v-show="isDisplay">
        <div class="opinion">

            <div class="submit">
                <button  @click="submit">提交</button>
                <button class="back" @click="addMsg">取消</button>
            </div>
        </div>
    </div>
</div>
<script src="/static/js/jquery-1.11.3.min.js" th:src="@{/static/js/jquery-1.11.3.min.js}"></script>
<script src="/static/layui/layui.all.js" th:src="@{/static/layui/layui.all.js}"></script>
<script src="/static/js/util.js" th:src="@{/static/js/util.js}"></script>
</body>
<script>


    let vm = Vue.createApp({
        data(){
            return{
                isDisplay:false,
                date:1,
                data:[]
            }
        },
        mounted(){
            (async () => {
                let response = await fetch('api/indexcard/day');
                let commits = await response.json();
                this.data = commits;
            })()
        },
        methods:{
            submit(){
                let form = document.querySelector("form");
                let data = new FormData(form);
                (async () => {
                    let response = await fetch('api/message/save',{
                        method:'POST',
                        body: data
                    });
                    let commits = await response.json();
                    console.log(commits);
                })()
                window.location.reload();
            },
            selectDate(n){
                this.date = n;
                if(n==1){
                    (async () => {
                        let response = await fetch('http://127.0.0.1:9090/data_now');

                        let commits = await response.json();
                        this.data = commits;
                    })()

                }
                else if(n==2){
                    (async () => {
                        let response = await fetch('http://127.0.0.1:9090/data_week');

                        let commits = await response.json();
                        this.data = commits;
                    })()
                }
                else{
                    (async () => {
                        let response = await fetch('http://127.0.0.1:9090/data_month');

                        let commits = await response.json();
                        this.data = commits;
                    })()
                }
            },
            addMsg(){
                this.isDisplay = !this.isDisplay;
            }
        }
    }).mount("#app");
</script>

</html>